<template>
	<view class="app-container video-play">
		<view class="liver-box">
			<web-view :src="src"></web-view>
			<!-- <live-player class="liver" :src="dataLive" mode="live" autoplay /> -->
			<!-- <video id="myvideo" style="width: 100%;"  :src="dataLive" autoplay controls object-fit="cover"></video> -->
		<!-- <zy-video-player
			style="width: 300px;height: 300px;"
			   v-if="videoOptions"
			   ref="player"
			   :is-live="true"
			   :source="videoOptions.source"
			 />
		</view> -->
		<!-- <view class="video-play-btn">
			<u-button @click="back" type="primary">返回</u-button>
		</view> -->
		</view>
	</view>
</template>

<script>
	import zyVideoPlayer from '@/components/VideoPlayer/index'
	import * as that from '../../API/index.js'
	export default {
		components:{
			zyVideoPlayer
		},
		data() {
			return {
				id:'',
				dataLive:'',
				videoOptions:false,
				src:''
			};
		},
		onLoad({id}) {
			this.id = id
			console.log(id)
			this.getVideoData(id)
		},
		methods:{
			getVideoData(id){
				that.experimentsVideo(id).then(res =>{
					console.log(res.data)
					this.dataLive = res.data
					// this.src = 'http://localhost:9528/#/live?url=' + encodeURIComponent(res.data)
					this.src = 'https://www.17gz8.com/#/live?url=' + encodeURIComponent(res.data)
					setTimeout(() => {
						this.videoOptions = {
						  // 点播
						  // source: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
						  // source: 'http://vjs.zencdn.net/v/oceans.mp4'
						  // source: 'https://media.w3.org/2010/05/sintel/trailer.mp4'
				
						  // 直播
						  source:
							 res.data
						  // source: 'rtmp://124.139.232.61:1935/live/livestream'
						}
					  }, 500)
				})
			},
			back(){
				uni.navigateBack()
			},
			end(){
				console.log('结束了')
			}
		}
	}
</script>

<style lang="scss">
.video-play{
	width: 100%;
	height: 100%;
	@include flex;
	flex-direction: column;
	.liver-box{
		width: 100%;
		// height: 300px;
		// background-color: orange;
		margin-top: 100rpx;
	}
	.video-play-btn{
		margin-top: 80rpx;
		width: 50%;
	}
}
</style>
